<template>
  <uni-popup ref="draftPopupRef" :is-mask-click="false">
    <view class="signature-box">
      <handwritten @close="draftCloseHandle"></handwritten>
    </view>
  </uni-popup>
  <view class="top-nav">
    <view class="left">
      <button class="reset-buttom button-hover" @click="reset">重置</button>
      <view class="page">{{ page }} / {{ total }}</view>
    </view>

    <view class="right">
      <view class="caogao" @click="draftHandle">草稿</view>
      <view class="cost-time-box">
        <text>{{ costTime }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import handwritten from '../../handwritten/src/index.vue'

const emits = defineEmits(['reset'])
withDefaults(
  defineProps<{
    page: number
    total: number
    costTime: string | number
  }>(),
  {},
)

const draftPopupRef = ref()
const draftHandle = () => {
  draftPopupRef.value.open('center')
}

const draftCloseHandle = () => {
  draftPopupRef.value.close()
}

const reset = () => {
  emits('reset')
}
</script>

<style lang="scss">
.signature-box {
  width: 100vw;
  height: 100vh;

  .signature {
    width: 1000rpx;
    height: 1000rpx;

    .lime-signature {
      width: 1000rpx !important;
      height: 1000rpx !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.top-nav {
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;

    .reset-buttom {
      width: 140rpx;
      height: 70rpx;
      font-size: 0.85rem;
      background-color: cornflowerblue;
      color: #fff;
    }

    .page {
      width: auto;
      height: 50rpx;
      background-color: #00b26a;
      border-radius: 20rpx;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20rpx;
      margin-left: 20rpx;
    }
  }
  .right {
    display: flex;
    align-items: center;
    .caogao {
      padding: 15rpx;
      background-color: #8dd9ff;
      border-radius: 20rpx;
      color: #fff;
      margin: 0 20rpx;
    }
    .cost-time-box {
      font-size: 1rem;
      font-weight: 700;
    }
  }
}
</style>
